<template>
    <div class="container">
        <div class="page-header">
            <div class="back-button">
                <el-button @click="$router.push('/main/biao')" icon="el-icon-back">返回</el-button>
            </div>
            <h1>一级评估输出指引表</h1>
            <p class="subtitle">（需在培训结束后填写完成并交回）</p>
        </div>
        
        <div class="main-content">
            <div class="form-actions">
                <el-button type="primary" @click="saveData" icon="el-icon-check">保存</el-button>
                <el-button type="info" @click="handlePrint" icon="el-icon-printer">打印</el-button>
                <el-button type="primary" @click="goToList" icon="el-icon-document">列表</el-button>
            </div>

            <div class="print-content">
                <div class="print-header">
                    <h2>一级评估输出指引表</h2>
                    <p>（需在培训结束后填写完成并交回）</p>
                </div>

                <el-form :model="formData" label-position="right" class="evaluation-form">
                    <!-- 基本信息表格 -->
                    <table class="info-table" border="1">
                        <tr>
                            <td class="label-cell">培训课程名称：</td>
                            <td><el-input v-model="formData.courseName" /></td>
                            <td class="label-cell">日期：</td>
                            <td>
                                <el-date-picker
                                    v-model="formData.courseDate"
                                    type="date"
                                    placeholder="选择日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%"
                                />
                            </td>
                        </tr>
                        <tr>
                            <td class="label-cell">学员姓名：</td>
                            <td><el-input v-model="formData.studentName" /></td>
                            <td class="label-cell">学员工号：</td>
                            <td><el-input v-model="formData.studentId" /></td>
                        </tr>
                        <tr>
                            <td class="label-cell">学员部门：</td>
                            <td><el-input v-model="formData.studentDepartment" /></td>
                            <td class="label-cell">学员直接上级：</td>
                            <td><el-input v-model="formData.studentSupervisor" /></td>
                        </tr>
                    </table>

                    <!-- 评估表格 -->
                    <table class="evaluation-table" border="1">
                        <thead>
                            <tr>
                                <th rowspan="2" class="project-header">具体项目</th>
                                <th colspan="6" class="agreement-header">请表明你对每个描述表示赞同的程度</th>
                            </tr>
                            <tr class="rating-headers">
                                <th>非常不同意</th>
                                <th>不同意</th>
                                <th>无所谓</th>
                                <th>同意</th>
                                <th>非常同意</th>
                                <th>不适用</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(question, index) in formData.questions" :key="index" class="question-row">
                                <td class="question-title">{{ question.title }}</td>
                                <td colspan="6" class="radio-group-cell">
                                    <el-radio-group v-model="question.answer">
                                        <el-radio :label="1">非常不同意</el-radio>
                                        <el-radio :label="2">不同意</el-radio>
                                        <el-radio :label="3">无所谓</el-radio>
                                        <el-radio :label="4">同意</el-radio>
                                        <el-radio :label="5">非常同意</el-radio>
                                        <el-radio :label="6">不适用</el-radio>
                                    </el-radio-group>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- 总体评分部分 -->
                    <div class="overall-rating-section">
                        <div class="section-header">Ⅵ.培训总体评分</div>
                        <div class="section-description">
                            1=完全无法接受……10=非常优秀（1分，2分，3分，4分，5分，6分，7分，8分，9分，10分）
                        </div>
                        <div class="rating-input">
                            <span class="rating-label">16.我对本课程的综合评价：</span>
                            <el-input-number 
                                v-model="formData.overallRating" 
                                :min="1" 
                                :max="10"
                                controls-position="right"
                            />
                        </div>
                        <div class="opinion-section">
                            <div class="label-row">请留下你的意见：（请用正楷书写）</div>
                            <el-input type="textarea" v-model="formData.opinions" :rows="4" />
                        </div>
                    </div>

                    <!-- 考核部分 -->
                    <div class="exam-section">
                        <div class="section-header">
                            Ⅶ.培训讲师根据本次课程合格标准编制一道考核题目（题目形式不限）
                        </div>
                        <div class="exam-content">
                            <div class="label-row">题目内容（部门自行添加）：</div>
                            <el-input type="textarea" v-model="formData.examQuestion" :rows="3" />
                            
                            <div class="label-row">学员作答：</div>
                            <el-input type="textarea" v-model="formData.studentAnswer" :rows="4" />
                            
                            <div class="label-row">合格标准描述（讲师填写）：</div>
                            <el-input type="textarea" v-model="formData.passingCriteria" :rows="3" />
                        </div>
                    </div>

                    <!-- 评价和签名部分 -->
                    <div class="evaluation-signature-section">
                        <div class="evaluation-result">
                            <span class="label-text">讲师阅卷评价：</span>
                            <el-radio-group v-model="formData.lecturerEvaluation">
                                <el-radio label="合格">合格</el-radio>
                                <el-radio label="不合格">不合格</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="signature-row">
                            <span class="label-text">讲师签名：</span>
                            <el-input v-model="formData.lecturerSignature" class="signature-input" />
                        </div>
                        <div class="signature-row">
                            <span class="label-text">学员直接上级签名：</span>
                            <el-input v-model="formData.supervisorSignature" class="signature-input" />
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { saveOrUpdateApi, getInfoApi } from '@/api/yijipgb'
import { formatDate, DATE_FORMAT } from '@/utils/date'

export default {
    data() {
        return {
            mode: 'add',
            id: null,
            formData: {
                courseName: '',
                courseDate: '',
                studentName: '',
                studentId: '',
                studentDepartment: '',
                studentSupervisor: '',
                questions: [
                    { title: 'I.内容', answer: null },
                    { title: '1.培训目标解释清晰明了', answer: null },
                    { title: '2.已达到培训目标', answer: null },
                    { title: '3.我理解本课程中的教材和主题', answer: null },
                    { title: '4.内容与我的工作相关', answer: null },
                    { title: 'Ⅱ.方法——下面的活动/材料有助于我理解培训的内容和达成所描述的培训目标', answer: null },
                    { title: '5.在培训前收到了预读材料', answer: null },
                    { title: '6.课堂讨论', answer: null },
                    { title: '7.课堂练习', answer: null },
                    { title: '8.视频教材', answer: null },
                    { title: 'Ⅲ.环境/管理', answer: null },
                    { title: '9.教室环境适合这个培训课程', answer: null },
                    { title: 'Ⅳ.培训讲师（培训讲师的名字）', answer: null },
                    { title: '10.对主题的内容表现出了相当的知识水平', answer: null },
                    { title: '11.清晰的表达有助于我的理解', answer: null },
                    { title: '12.促进了讨论和参与。', answer: null },
                    { title: '13.对问题给予恰当的回答', answer: null },
                    { title: '14.有效地控制小组的学习热情', answer: null },
                    { title: '15.使讨论/活动始终在培训目标所设定的范围内', answer: null }
                ],
                overallRating: null,
                opinions: '',
                examQuestion: '',
                studentAnswer: '',
                passingCriteria: '',
                lecturerEvaluation: null,
                lecturerSignature: '',
                supervisorSignature: '',
                contentScore: ''
            }
        }
    },
    created() {
        this.mode = this.$route.query.mode || 'add'
        this.id = this.$route.query.id
        if (this.id) {
            this.fetchData()
        }
    },
    methods: {
        goToList() {
            this.$router.push({
                path: '/main/renshi/zhaoping/yijipgb/yijipgbList'
            })
        },
        async fetchData() {
            try {
                const { data } = await getInfoApi(this.id)
                if (data) {
                    // 处理日期格式
                    const formData = {
                        ...data,
                        courseDate: formatDate(data.courseDate, DATE_FORMAT.date),
                        createTime: formatDate(data.createTime, DATE_FORMAT.datetime),
                        updateTime: formatDate(data.updateTime, DATE_FORMAT.datetime),
                        // 如果contentScore是JSON字符串，则解析它
                        questions: data.contentScore ? JSON.parse(data.contentScore) : this.formData.questions
                    }
                    this.formData = formData
                }
            } catch (error) {
                console.error('获取数据失败：', error)
                this.$message.error('获取数据失败')
            }
        },
        async saveData() {
            try {
                // 构建符合后端实体的数据结构
                const submitData = {
                    id: this.id,
                    courseName: this.formData.courseName,
                    courseDate: this.formData.courseDate,
                    studentName: this.formData.studentName,
                    studentId: this.formData.studentId,
                    studentDepartment: this.formData.studentDepartment,
                    studentSupervisor: this.formData.studentSupervisor,
                    contentScore: JSON.stringify(this.formData.questions),
                    overallRating: this.formData.overallRating,
                    opinions: this.formData.opinions,
                    examQuestion: this.formData.examQuestion,
                    studentAnswer: this.formData.studentAnswer,
                    passingCriteria: this.formData.passingCriteria,
                    lecturerEvaluation: this.formData.lecturerEvaluation,
                    lecturerSignature: this.formData.lecturerSignature,
                    supervisorSignature: this.formData.supervisorSignature
                }
                
                await saveOrUpdateApi(submitData)
                this.$message.success('保存成功')
                this.goToList()
            } catch (error) {
                console.error('保存失败：', error)
                this.$message.error('保存失败：' + error.message)
            }
        },
        handlePrint() {
            window.print()
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    // background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    min-height: 100vh;
    position: relative;
}

.page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    padding: 20px;
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

    h1 {
        font-size: 24px;
        color: #2c3e50;
        margin: 0;
        font-weight: 600;
        position: relative;
        padding-bottom: 10px;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #409EFF, #67C23A);
            border-radius: 3px;
        }
    }

    .subtitle {
        margin-top: 10px;
        color: #606266;
        font-size: 14px;
    }
}

.back-button {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.main-content {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.form-actions {
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.evaluation-form {
    .info-table, .evaluation-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #ebeef5;
        margin-bottom: 24px;

        td, th {
            padding: 12px;
            border: 1px solid #ebeef5;
            vertical-align: middle;
        }
    }

    .label-cell {
        background-color: #f8f9fa;
        font-weight: 500;
        color: #2c3e50;
        width: 140px;
        text-align: right;
    }

    .project-header {
        background-color: #f0f7ff;
        color: #1890ff;
        width: 200px;
    }

    .agreement-header {
        background-color: #f0f7ff;
        color: #1890ff;
        text-align: center;
    }

    .rating-headers th {
        background-color: #f8f9fa;
        font-weight: 500;
        text-align: center;
        padding: 8px;
    }

    .question-row {
        &:hover {
            background-color: #f5f7fa;
        }
    }

    .question-title {
        text-align: left;
        padding: 12px;
        line-height: 1.5;
    }

    .radio-group-cell {
        padding: 16px;
        
        .el-radio-group {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 10px;
        }
    }
}

.section-header {
    background-color: #f0f7ff;
    color: #1890ff;
    font-weight: bold;
    text-align: center;
    padding: 12px;
    margin: 20px 0;
    border-radius: 4px;
}

.section-description {
    text-align: center;
    color: #606266;
    margin: 10px 0;
    font-size: 14px;
}

.rating-input {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 4px;

    .rating-label {
        color: #2c3e50;
        font-weight: 500;
    }
}

.opinion-section, .exam-content {
    margin: 20px 0;

    .label-row {
        margin-bottom: 8px;
        color: #2c3e50;
        font-weight: 500;
    }
}

.evaluation-signature-section {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;

    .evaluation-result {
        margin-bottom: 20px;
    }

    .signature-row {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 12px 0;

        .label-text {
            min-width: 120px;
            color: #2c3e50;
        }

        .signature-input {
            max-width: 200px;
        }
    }
}

@media screen and (max-width: 768px) {
    .container {
        padding: 16px;
    }

    .page-header {
        padding: 16px;
        margin-bottom: 20px;

        h1 {
            font-size: 20px;
        }
    }

    .main-content {
        padding: 16px;
    }

    .form-actions {
        flex-direction: column;

        .el-button {
            width: 100%;
        }
    }

    .evaluation-form {
        .radio-group-cell {
            .el-radio-group {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    }
}

@media print {
    .container {
        margin: 0;
        padding: 0;
        background: none;
        min-height: auto;
    }

    .page-header,
    .form-actions,
    .back-button {
        display: none !important;
    }

    .main-content {
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .print-header {
        text-align: center;
        margin-bottom: 20px;
        padding: 20px 0;
        border-bottom: 2px solid #000;

        h2 {
            font-size: 24px;
            font-weight: bold;
            margin: 0;
        }

        p {
            margin-top: 8px;
            color: #666;
        }
    }

    .evaluation-form {
        table {
            border: 1px solid #000;

            td, th {
                border: 1px solid #000;
                padding: 8px;
                font-size: 14px;
            }
        }

        .el-input__inner,
        .el-textarea__inner {
            border: none;
            padding: 0;
            font-size: 14px;
            color: #000;
            background: none;
        }

        .el-radio {
            margin-right: 20px;
            .el-radio__label {
                color: #000;
            }
        }
    }

    .section-header {
        border: 1px solid #000;
        margin: 20px 0;
    }

    @page {
        margin: 2cm;
        size: A4 portrait;
    }
}
</style>